<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="ul">
    <!-- <li>html</li>
    <li>css</li>
    <li>js</li> -->
  </ul>

  <!-- <script>
    let arr = ['html', 'css', 'js', 'node'];
    for (let i = 0; i < arr.length; i++) {
      let li = document.createElement('li')
      li.innerHTML = arr[i];
      document.getElementById('ul').appendChild(li)
    }
  </script> -->
  <script>
    // 模版
    let template = `
      <ul>
        <% for(let i = 0; i < arr.length; i++) { %>
          <li> <%= arr[i] %> </li>
        <% } %>
      </ul>
    `

    function compile(tel) {
      let evalExpr = /<%(.+?)%>/g
      tel = tel.replace(evalExpr, '**')

      return tel
    }

    console.log(compile(template));
  </script>
</body>
</html>